<!--左边下拉导航栏-->
<template>
    <div id="left">
        <el-menu
                active-text-color="#ffd04b"
                text-color="#000"
                :default-active="this.$route.path"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :collapse="flag"
                background-color="#545c64"
                menu-trigger="click"
                router="true">
            <el-menu-item v-for="(item,index) in menu" :index="item.path">
                <i :class="item.icon"></i>
                <span slot="title">{{item.title}}</span>
            </el-menu-item>

        </el-menu>
    </div>
</template>

<script>
    import store from '@/store'
    import {mapState} from 'vuex'
    export default {
        name: "mainLeft",
        data() {
            return {
                defaultPath : '/product'==this.$route.path ? this.$route.path :'/product'  //这里用来解决导航栏进入具体页面不改变的问题



            }
        },
        computed: mapState(["flag","menu"]),
        created() {
            this.addData()
        },
        methods: {
            handleOpen(key, keyPath) {
            },
            handleClose(key, keyPath) {
            },
            //点击标题传递参数给navigator组件，仅仅是个面包屑导航，不要也罢，没必要为了它特的去写Navigator.vue
            handleTitle(index) {
                this.bus.$emit('sendIndex',index)
            },
            addData() {  //现在这个方法没什么用

            }
        },
        store
    }
</script>

<style>
    .el-menu-vertical-demo .el-submenu__title {
        overflow: hidden;
    }
    .left-width .iconfont {
        font-size: 18px;
        color: #fff;
    }
    .left-width {
        width: 213px;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        min-height: 680px;
    }
    #left {
        height: 680px;
        background-color: #545c64;
        z-index: 0;
    }
    #left .el-menu-vertical-demo .title {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        /*margin-left: 14px;*/
    }
    .el-submenu {
        border-bottom: 1px solid #eeeeee0f !important;
    }
    .el-submenu__title:hover {
        background-color: #fff;
    }
    .el-submenu__title i {
        color: #fbfbfc !important;
    }
</style>
